<template>
    <div class="commonTab">
        <el-tabs type="card" v-model="value"
                 @tab-click="handleClick">
            <template v-for="(row, index) in data">
                <el-tab-pane :name="row.name" :closable="row.closable">
                    <span slot="label"><i :class="row.icon"></i> {{row.label}}</span>
                    <div class="subTab">
                        <el-tabs type="card"
                                 v-model="subValue[value]"
                                 @tab-remove="removeTab"
                                 @tab-click="subClick">
                            <template v-for="(row1, index1) in subData">
                                <el-tab-pane :name="row1.name" :closable="row1.closable">
                                    <span slot="label"><i :class="row1.icon"></i> {{row1.label}}</span>
                                    {{row1.text}}
                                </el-tab-pane>
                            </template>
                        </el-tabs>
                    </div>
                </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        value: String,
        subData: Array,
        currentTab: String,
        currentSubTab: String,

        data() {
            const me = this;
            me.subValue = {};
            if ((me.subData == null || me.subData.length == 0) && me.defaultValue) {
                for (let row in me.data) {
                    if (me.data[row].name == this.defaultValue) {
                        me.subData = me.data[row].children;

                    }
                }
            }
            for (let row in me.subData) {
//                me.subValue = me.subData[row].name;
                me.subValue[this.defaultValue] = me.subData[row].name;
                break;
            }

            return {
                value: me.defaultValue,
                subData: me.subData
            };
        },
        constructor() {

        },
        watch:{
            defaultValue(val){
                const me = this;
                me.value = val;
                if(!me.subValue) {
                    me.subValue = {};
                }
                if ((me.subData == null || me.subData.length == 0) && me.value) {
                    for (let row in me.data) {
                        if (me.data[row].name == this.value) {
                            me.subData = me.data[row].children;

                        }
                    }
                }
                if(!me.subValue[this.value]) {
                    for (let row in me.subData) {
//                me.subValue = me.subData[row].name;
                        me.subValue[this.value] = me.subData[row].name;
                        break;
                    }
                }
            },
            data(val){
                console.log(val)
                const me = this;
                me.subValue = null;
                this.$nextTick(()=>{
                    if ((me.subData == null || me.subData.length == 0) && me.defaultValue) {
                        for (let row in me.data) {
                            if (me.data[row].name == this.defaultValue) {
                                me.subData = me.data[row].children;

                            }
                        }
                    }
                    for (let row in me.subData) {
                        me.subValue[me.defaultValue] = me.subData[row].name;
                        break;
                    }
                })

                me.value = me.defaultValue;
            }
        },
        methods: {
            handleClick(tab, event) {
                const me = this;
                /*if(tab.name == me.value){
                    return;
                }*/
                if (me.currentTab !== tab.name) {
                    me.currentTab = tab.name;
                    for (let row in me.data) {
                        if (me.data[row].name == tab.name) {
                            me.subData = me.data[row].children;
                        }
                    }
                    if (!me.subValue[this.value]) {
                        for (let row in me.subData) {
                            me.subValue[me.value] = me.subData[row].name;
                            me.currentSubTab = me.subValue[me.value];
                            break;
                        }
                    }
                    this.$emit("tabClick", me.value, me.subValue[me.value], event);
                }
            },
            subClick(tab, event) {
                const me = this;
                /*if(me.subValue == tab.name){
                    return;
                }*/
                if (me.currentSubTab !== tab.name) {
                    me.currentSubTab = tab.name;
                    me.subValue[this.value] = tab.name;
                    this.$emit("subTabClick", me.value, me.subValue[me.value], event);
                }
            },
            removeTab(tabName) {
                let tabs = this.data;
                let activeName = this.defaultValue;
                if (activeName === tabName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === tabName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                this.defaultValue = nextTab.name;
                            }
                        }
                    });
                }
                this.data.forEach((tab, index) => {
                    if (tab.name === tabName) {
                        this.data.splice(index, 1);
                        return;
                    }
                });
                this.$emit("removeTab", tabName);
            },
            addTab(tab) {
//                this.$emit("addTab", tab);
            },
            getTabValue() {
                return {tab: this.value, subTab: this.subValue[this.value]}
            }
        },
        props: {
            data: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            defaultValue: String
        }
    };
</script>